<template>
  <div>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
    <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
    <script type="text/javascript" charset="UTF-8" src="https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js"></script>
    <client-only>
    <el-alert
      title="视频资源有问题，请联系课程人员重新上传视频"
      type="error"
      show-icon
      v-show="this.isshow==true"
    >
    </el-alert>
    <el-alert
      title="视频已被删除，请联系课程人员重新上传视频"
      type="error"
      show-icon
      v-show="this.isshow1==true"
    >
    </el-alert>
    <!-- 定义播放器dom -->
    <div id="J_prismPlayer" class="prism-player" />
    </client-only>
  </div>
</template>

<script>
  import vod from '@/api/vod'
  import cookie from 'js-cookie'
  import course from "@/api/course"
  export default {

    layout: 'video',//应用video布局
    data() {
      return {
        isshow:'',
        isshow1:'',
        vid:'',
        playAuth:'',
        isFree:'',
        courseId:'',
      };
    },
    created() {

    },
    mounted() {
      this.getPlayAuth()
      setTimeout(() => {
        this.getwacth()
      }, 1000)
    },
    methods:{

      getPlayAuth(){
        if(undefined==this.$route.params.vid){
          this.isshow=true
        }else {
          vod.getPlayAuth(this.$route.params.vid).then(response => {
            this.vid=this.$route.params.vid
            this.playAuth=response.data.data.playAuth
            this.isFree=response.data.data.isFree
            this.courseId=response.data.data.courseId
          })
        }
      },
      initCourseInfo() {
        course.getById(this.courseId)
          .then(response => {
            return{
              isbuy: response.data.data.isbuy
            }
          })
      },
      isFreewatch(){
        var danmukuList = [{
          "mode": 1,
          "text": "test",
          "stime": 1000,
          "size": 25,
          "color": 0xffffff
        }]
        var danmukuList1 = [{
          "mode": 1,
          "text": "66666",
          "stime": 1000,
          "size": 25,
          "color": 0xffffff
        }]
        var test=new Aliplayer({
          id: 'J_prismPlayer',
          vid: this.vid, // 视频id
          playauth: this.playAuth, // 播放凭证
          encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: '100%',
          height: '500px',
          qualitySort: 'asc', // 清晰度排序
          mediaType: 'video', // 返回音频还是视频
          autoplay: false, // 自动播放
          isLive: false, // 直播
          rePlay: false, // 循环播放
          preload: true,
          controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
          useH5Prism: true, // 播放器类型：html5
          showBarTime: '30000',
          components: [{
            name: 'AliplayerDanmuComponent',
            type: AliPlayerComponent.AliplayerDanmuComponent,
            args: [danmukuList]
          }]
        }, function (player) {
          //发送按钮
          document.querySelector(".danmu-input-enter").addEventListener('click',function () {

          })
          this.timer1 = setInterval(() => {

          }, 1000);
        });
      },
      isNot_Freewatch(){
        var link="/course/"+this.courseId
        let a='<a href="'+link+'" class=\"vip-join\">购买视频</a> 观看完整视频'
        new Aliplayer({
          id: 'J_prismPlayer',
          vid: this.vid, // 视频id
          playauth: this.playAuth, // 播放凭证
          encryptType: '1', // 如果播放加密视频，则需设置encryptType=1，非加密视频无需设置此项
          width: '100%',
          height: '500px',
          qualitySort: 'asc', // 清晰度排序
          mediaType: 'video', // 返回音频还是视频
          autoplay: false, // 自动播放
          isLive: false, // 直播
          rePlay: false, // 循环播放
          preload: true,
          controlBarVisibility: 'hover', // 控制条的显示方式：鼠标悬停
          useH5Prism: true, // 播放器类型：html5
          components: [{
            name: 'PreviewVodComponent',
            type: AliPlayerComponent.PreviewVodComponent,
            args: [10, '#endPreviewTemplate', a]
          }]
        }, function (player) {
          var vip_limit_btn = document.querySelector('.vip_limit_btn')
          vip_limit_btn.addEventListener('click', function() {
            confirm('确认要购买该课程?')
          })

          var close_btn = document.querySelector('.vip_limit_close_btn')
          close_btn.addEventListener('click', function() {
            player.getComponent('PreviewVodComponent').closePreviewLayer()
          })
        })
      },
      getwacth(){
        if(this.playAuth==""){
          this.isshow=false
          this.isshow1=true
        }else {
          this.initCourseInfo()
          var jsonStr = cookie.get("ljh_ucenter");
          if (jsonStr) {
            if(this.isFree){
              this.isFreewatch()
            }else {
              if(this.isbuy==false){
                this.isNot_Freewatch()
              }else {
                this.isFreewatch()
              }
            }
          }else {
            this.isNot_Freewatch()
          }
        }

      },

    },
  }
</script>

<style>
  .vip-join {
    color: #00c1de;
  }

  .vip_limit_content {
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .vip_limit_content .title {
    font-size: 18px;
    line-height: 36px;
    color: #fff;
    text-align: center;
    width: 100%;
  }

  .vip_limit_button_box {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .vip_limit_btn {
    display: inline-block;
    min-width: 100px;
    position: relative;
    background: #f60;
    padding: 0 35px;
    margin: 0px 5px 20px 5px;
    border-radius: 38px;
    font-size: 18px;
    line-height: 38px;
    color: #623A0C;
    text-align: center;
    background-image: linear-gradient(-135deg, #FBE8A8 0%, #F8E7AC 15%, #E2C078 100%);
    cursor: pointer;
  }

  .vip_limit_close {
    text-align: center;
  }
  .vip_limit_close span {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 36px;
    background: rgba(165, 165, 165, 0.54);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
  }
</style>
